<template>
    <div class="app-container">
        <div class="tcl">
            <el-tabs v-model="activeName">
                <el-tab-pane label="参与投标" name="first">
                    <el-form label-width="100px" size="medium">
                        <el-row type="flex" align="middle" justify="start" :gutter="15">
                            <el-form-item label="项目编号" prop="iNumber">
                                <el-input v-model="queryParams.iNumber" placeholder="请输入项目编号" clearable
                                    :style="{ width: '100%' }"></el-input>
                            </el-form-item>
                            <el-form-item label="项目名称" prop="iName">
                                <el-input v-model="queryParams.iName" placeholder="请输入项目名称" clearable
                                    :style="{ width: '100%' }"></el-input>
                            </el-form-item>
                            <el-form-item size="medium">
                                <el-button type="primary" @click="handleQuery">查询</el-button>
                                <el-button>重置</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>
                    <el-table stripe v-loading="loading" :data="tenderData">
                        <el-table-column type="index" label="序号" align="center" width="80" />
                        <el-table-column label="项目编号" align="center" prop="iNumber" />
                        <el-table-column label="项目名称" align="center" prop="iName" />
                        <el-table-column label="招标方式" align="center" prop="iWay">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.iWay === 1 ? '' : 'success'">
                                    {{ scope.row.iWay === 1 ? '公开' : '邀请' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="项目负责人" align="center" prop="pLeader" />
                        <el-table-column label="项目状态" align="center" prop="projectState">
                            <template slot-scope="scope">
                                <el-tag type="" :color="getTagColor(scope.row.projectState)">
                                    {{ getProjectStateText(scope.row.projectState) }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="enterRow(scope.row)" v-if="scope.row.projectState > 1" type="text"
                                    size="small">
                                    进入项目
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />

                </el-tab-pane>
                <!-- 查询全部 -->
                <el-tab-pane label="查询全部项目" name="seventh">
                    <el-form label-width="100px" size="medium">
                        <el-row type="flex" align="middle" justify="start" :gutter="15">
                            <el-form-item label="项目编号" prop="iNumber">
                                <el-input v-model="queryParams1.iNumber" placeholder="请输入项目编号" clearable
                                    :style="{ width: '100%' }"></el-input>
                            </el-form-item>
                            <el-form-item label="项目名称" prop="iName">
                                <el-input v-model="queryParams1.iName" placeholder="请输入项目名称" clearable
                                    :style="{ width: '100%' }"></el-input>
                            </el-form-item>
                            <el-form-item size="medium">
                                <el-button type="primary" @click="handleQuery">查询</el-button>
                                <el-button @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>
                    <el-table stripe v-loading="loading" :data="tenderList">
                        <el-table-column type="index" label="序号" align="center" width="80" />
                        <el-table-column label="项目编号" align="center" prop="iNumber" />
                        <el-table-column label="项目名称" align="center" prop="iName" />
                        <el-table-column label="招标方式" align="center" prop="iWay">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.iWay === 1 ? '' : 'success'">
                                    {{ scope.row.iWay === 1 ? '公开' : '邀请' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="项目负责人" align="center" prop="pLeader" />
                        <el-table-column label="项目状态" align="center" prop="projectState">
                            <template slot-scope="scope">
                                <el-tag type="" :color="getTagColor(scope.row.projectState)"
                                    v-if="scope.row.projectState != 7 && scope.row.projectState != 8">
                                    {{ getProjectStateText(scope.row.projectState) }}
                                </el-tag>
                                <el-tag type="danger" v-if="scope.row.projectState == 7">
                                    {{ getProjectStateText(scope.row.projectState) }}
                                </el-tag>
                                <el-tag type="success" v-if="scope.row.projectState == 8">
                                    {{ getProjectStateText(scope.row.projectState) }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="checkRow(scope.row)" type="text" size="small">
                                    查看
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total1 > 0" :total="total1" :page.sync="queryParams1.pageNum"
                        :limit.sync="queryParams1.pageSize" @pagination="getList" />
                </el-tab-pane>

            </el-tabs>
        </div>
    </div>
</template>

<script>
import { getTenderProjectList } from '@/api/system/purchase'

export default {
    data() {
        return {
            activeName: 'first',
            tenderData: [],
            //全部数据
            tenderList: [],
            //查询参数
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                iName: null,
                iNumber: null,
                projectState: 3
            },
            total1: 0,
            //查询所有参数
            queryParams1: {
                pageNum: 1,
                pageSize: 10,
                iName: null,
                iNumber: null
            },
            //遮罩层
            loading: true,
        }
    }, created() {
        this.getList();
    }
    , methods: {
        getList() {
            this.loading = true;
            console.log(this.queryParams, "555");
            getTenderProjectList(this.queryParams).then(response => {
                this.tenderData = response.rows; // 确保这里的 rows 是正确的
                this.total = response.total; // 确保这里的 total 是正确的
                this.loading = false;
            }).catch(error => {
                console.error('获取数据失败:', error);
                this.loading = false;
            });

            this.loading = true;
            getTenderProjectList(this.queryParams1).then(response => {
                console.log('Current page2:', this.queryParams1.pageNum);
                console.log('Page size2:', this.queryParams1.pageSize);
                console.log(response, "DSADSDS")
                this.tenderList = response.rows;
                this.total1 = response.total;
                this.loading = false;
            });
        },
        //状态文字
        getProjectStateText(projectState) {
            switch (projectState) {
                case 1:
                    return '立项中';
                case 2:
                    return '招标中';
                case 3:
                    return '投标中';
                case 4:
                    return '开标中';
                case 5:
                    return '评标中';
                case 6:
                    return '定标中';
                case 7:
                    return '废标';
                case 8:
                    return '完成';
                default:
                    return '未知';
            }
        },
        getTagColor(projectState) {
            const colors = {
                1: '#e0f2ff', // 非常浅的浅蓝色
                2: '#cce6ff', // 浅蓝色
                3: '#b3d9ff', // 稍深的浅蓝色
                4: '#99ccff', // 中浅蓝色
                5: '#a6e6ff', // 另一种浅蓝色
                6: '#f2e6ff', // 浅紫罗兰色
                7: '#e6f2f2'  // 浅青色
            };
            return colors[projectState] || '#f0f0f0'; // 默认浅色
        },
        //查看当前行
        checkRow(row) {
            this.$router.push({
                path: '/tender/checkProject',
                query: {
                    iNumber: row.iNumber, // 使用固定值测试
                    check: 1
                }
            });
        },
         //进入当前行详细页面(进入招标项目)
         enterRow(row) {
            this.$router.push({ path: '/tender/enterProject', query: { "iNumber": row.iNumber, "ent": 1 ,"status":row.projectState} })
        },
        //搜索按钮操作
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        //重置按钮操作
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        //进入当前行详细页面(进入招标项目)
        enterRow(row) {
            this.$router.push({ path: '/tender/enterProject?activeName=second', query: { "iNumber": row.iNumber, "ent": 1 } })
            this.activeName='second';
            this.currentTabComponent = 'tende-announcement';
            this.showSecondTab = true;
        },
    }
}

</script>
